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1. The Benefits of Modern Tooling 

2. File syncing + Using an external editor 

3. Making our editor awesome 

4. What about GitHub? 

How do we do it? 


5 . 



THE BENEFITS OF MODERN TOOLING 






BENEFITS MODERN TOOLING PROVIDE 

■ Increased productivity 

" .. .to get games out the door faster 

” ...to release new features shipped 

■ Smoother work with team environments 

” ...to work on multiple features at the same time and get more done 

" ...to do code review to prevent mistakes your other developers may not have noticed 

■ ...but how do we use these modern tools? 
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FILE SYNCING + USING AN EXTERNAL EDITOR 






HOW IT WORKS 




HAS THIS EVER HAPPENED TO YOU? 








FEATURES YOU DIDN’T KNOW YOU WANTED! 

■ Multiple cursors to edit multiple places at once 



rfb 


debuffMaid:GiveTask(StatHelper:GiveSpeedBuff () ) 
debuffMaid :GiveTask( StatHelper: GiveAttackBuff ( ) ) 
debuffMaid:GiveTask(StatHelper :GiveDefenseBuff () ) 






FEATURES YOU DIDN’T KNOW YOU WANTED! 


■ View multiple files at the same time 


local Players = game:GetServtce( “Players" ) 

local RepllcatedStorage = game:GetService< “RepllcatedStorage“ ) 
local DataStore2 = requi.reiReplicatedStorage][j-lbraries.DataStore2 
Players.PlayerAdded: Connect ( function ( : ) 





LET’S MAKE OUR EDITOR AWESOME 










SNIPPETS 


k 

CT Untitled-1 

• {} lua.json x 

) 

c: ► Users ► boyned ► AppData ► Roaming ► Code ► User ► snippets ► {) lua.json ► 0 LocalPlayer ► [ ]body 



// Macros 

1 


"PLAY_SOUND": { 


•■prefix": "PLAY_SOUND", 

1 


"body": [ 


"local ${l:sound} = ${2:soundName}:Clone( )" , 


"${1:sound}.PlayOnRemove = tijje" , 



"${l:sound>.Parent = ${3:parent}“ , 



"${1:sound}:Destroy ( )$© " , 



] 

? 


}, 







SNIPPETS 


Studio: 5s 


400 % 

increase! 


External Editor with Snippets: 1 s 


* Untitled-1 x 






SNIPPETS 

■ As of May 6th, 2019, the core scripts use the game:GetService(...) pattern 1088 times. 

■ If they were all typed by hand in Studio at 5 seconds each...5440s (90 minutes, 1.5 hours) 

■ If they were all typed with snippets in an external editor at 1 second each...1088 seconds 
(18 minutes) 



72 ■'minute'"difference! 







SNIPPETS 


Studio: 10s 


External Editor with Snippets: ~3.5s 


local SoundService = gane :GetService( "SoundService" ) 
local Workspace = game :GetService( "Workspace'’ ) 

I 


local SoundService = game :GetServlce( "SoundService" ) 
local Workspace = game:GetService( "Workspace" ) 


185 % increase! 
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EXTENSIONS 


■ vscode-rbxlua - Syntax highlighting to rival Studio’s 

■ roblox-lua-autofills - Various autofills for Roblox Lua, like Instance.new and Enums 


> BodyPartR15 
Button 

> ButtonStyle 

> CameraMode 

> CameraPanMode 
f* CameraType 

> CellBlock 
/'CellMaterial 

> CellOrientation 

> CenterDialogType 

> ChatCallbackType 
>ChatColor 


local SparkleColors = { 

BetaTester = II]Color3.new( 1, 1, 0), 
Artist = □Color3.fromRGB( 100, 0, 100), 
Admin = □Color3.fromRGB(255, 0, 127), 
Green = BColor3.f romRGB(0, 255, 0), 


Bookmarks - Jump around places in your code, even across files (no more Ctrl+F and 
searching code) 






INTEGRATION WITH GITHUB AND WHY 






WHAT’S GITHUB? 


■ Host for git repositories, a form of version control software 

° Keeps all versions of code throughout history 
° Fearlessly work on code without any worry that you’ll lose work 

° No more undo spam! 

° Do entire codebase refactors and go back if it doesn’t work out 
° See when code was added to understand without documentation 
° Vital for working with teams 


° Work on completely separate features at the same time 








TEAM WORK 


Roadmap 


Add Doge pets 
Add banana powerup 
Add chicken hats 

















TEAM WORK 


Roadmap 


Add Doge pets 
Add banana powerup 
Add chicken hats 
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HOW? 


■ GitHub has an easy to use desktop application 



O Rle Edit View Repository Branch Help 

n Current repository ^ Current branch 

^ battle-hats ** setting-crates-ablaze 


<$> 


Publish branch 

Publish this branch to GitHub 


Changes 12 History 

P Select branch to compare... 

Changes how knockback works. CL **G... 
l S* Kampfkarren committed Feb 4,2019 

Merge branch 'master' of https;//github... 

*3 Kampfkarren committed Feb 4, 2019 

Make github-automation use WSGI 

II Kampfkarren committed Feb 4, 2019 

Add uwsgi as dev dependency 

Kampfkarren committed Feb 4, 2019 

Turn debug false 

HI Kampfkarren committed Feb 4, 2019 

Adds Github Automation to automate H... 

**<| Kampfkarren committed Feb 4, 2019 

Bump serde_derive from 1.0.85 to 1.0.87 ... 

HP dependabot[bot] authored and boyned/... 

Bump serde from 1.0.85 to 1.0.87 in /Mis... 


Changes how knockback works. S “General** - Changed how knockback... 

*** Kampfkarren committed -O- 2e26b52 [fjl 3 changed files 


_ works, and modified numbers of those that 

used it. 




Game\ReplicatedSt..\Configuration.lua H 




-2,14 +2,14 0? return { 


2 

2 


AbilitylCooldown = 9.0, 

Game\ReplicatedSt...\Configuration.lua 1~*1 

3 

3 


FireHoseBeawtagic = 18.5, 

Game\ServerScriptSer...\Knockback.lua 0 

4 

4 


FireHoseDamage = 14.0, 


S 



FireHosetcnockback = -25.0, 



5 

+ 

FireHoseknockback = -15.0, 


6 

6 


FireHoseicnockbackLoss = 0.5, 


7 

7 


FireHoseLength = 20.0, 


8 

8 


FireHoseMaxRange = 35.0, 


9 

9 


FireHoseReload = 0.2, 


ie 

ie 


FireHydrantDamage = 45.0, 


11 

n 


FireHydrantoelay = 1 . 0 , 


12 


- 

FireHydrantKnockback = 20.0, 



12 

+ 

FireHydranttcnockback = § 0 . 0 , 


13 

13 


FireHydrantLifetime = 6.0, 


14 

14 


FireHydrantRange = 45 . 0 , 


15 

15 


RedAlertDamage =70.0, 







HOW? 


■ GitHub has an easy to use desktop application 



O File Edit View 

Repository 

Branch Help 

□ 

X I 

1 n Current repository 

battle-hats 


Oj Current branch ^ _ Publish branch 

“ setting-crates-ablaze 1 Publish this branch to GitHub 



| Changes 9 

History 

Game\StarterGui\LobbyGui\ShopGui\initclientlua 


0 


□ 12 changed files 

Q LoadRequirementsDictionary.lua 0 
Q GameVReplicate...'BattlePassUtil.lua •] 

□ Game\ReplicatedSt...\BattlePass.lua 0 
B Game\Serve...\BattlePass.server.lua 0 

□ Game\StarterGui\LobbyG...\initliia 0 

□ Game'6tarterGui\Lo...\initclientkia 0 

□ Game\StarterGui\LobbyG...\initliia 0 . 
I B Game\Starter...\GameEnd.dientlua 0 

□ Srte\assets\css\statbus.scss 0 

Q Site\asset5\is\statbus\Aoo.tsx 0 

Summary (required) 

Description 


Commit to setting crates ablaze 


local Players = game : GetService ( "Players" ) 

local Replicatedstorage = game : GetService ("Rep lie atedsforage" ) 

la-local GetRenote - require(ReplicatedStorage. Libraries.GetRemote) 
local Roact = require(ReplicatedStorage. submodules.Roact) 
local RoactRodux = require(Replicatedstorage. submodules.RoactRodux) 
local Roduxstore - require(Replicatedstorage.RoduxStore) 

local e = Roact.createslenent 

local showCoinsAsk = Players. LocalPlayerrMaitForchildC'showCoinsAsk") 
I elocal UpdateBattlePass = GetRemote("UpdateBattlePass") 

Roact.mount ( 

e(RoactRodux.storeProvider, { 

£§ -40,3 442,10 Roduxstore.changed:connect(function!new, old) 


4 end) 

* I xcipdateBattlePass.OnclientEvent : connect(f unc t ion(points) 
•7 I 4 Roduxstore :dispatch({ 

* I 4 type = “setPoints", 

5 I 4 points = points, 

0 4 » 







HOW? 

■ ...but I’m not great at explaining how! 

■ https://auides.aithub.com/introduction/flow/ 

Teaches the thought process you need when using git 

■ https://proaramminahistorian.org/en/lessons/aettina-started-with-aithub-desktop 

■ https://help.github.com/en/desktop 


Teaches how to actually use the GitHub desktop app 




/s 



BUT NOW THAT WE’RE ON GITHUB...ISSUES 

■ “Issues” feature allows you to easily create entire threads dedicated to bugs/feature requests 

■ Extremely precise labeling 


© 114 Open ✓ 420 Closed Author ~ Labels ▼ Projects ▼ Milestt 

© OnServerEvent to ignore players that haven't loaded in yet internal 

#740 opened 26 days ago by Kampfkarren “ Necessary Before... 

® Namespace Rodux store dispatches future oversight 

#730 opened on Apr 12 by Kampfkarren 

© Replace crates with rotating shop and battle pass 

#727 opened on Apr 9 by Kampfkarre i * Necessary Before... 

© Disconnect all connections to players when they leave internal 

#702 opened on Mar 30 by Kampfkarren 

© Record sho uld not show tooltip over enemy characters if they don't have a player 
2 hat 2 

#697 opened on Mar 20 by Kampfkarren 



BUT NOW THAT WE’RE ON GITHUB...ISSUES 


■ Embed specific pieces of code (which Trello cannot do!) 




Kampfkarren commented on Jul 27, 2018 • edited ▼ 


battle-hats/Game/ReplicatedStorage/LocalComponents/Transition.module.lua 
Lines 25 to 59 in 97b76e8 

25 spawn(function() 

local transitionGui = script.TransitionGui:Clone() 


27 

28 

29 

30 

31 

32 

33 


transitionGui.Parent = playerGui 


local background = transitionGui.Background 
local duck = transitionGui.Duck 


Author + (2) 


background: aenSi;e(UDim2.ne, (5, 3, 5j 3), Enum.EasingDirection.Out, Enum.Easii 


rR: 






BUT NOW THAT WE’RE ON GITHUB...ISSUES 


■ For power users, can even be used to embed Roblox errors! 


ServerScriptService.RageHandler - attempt to index local 
'parent' (a nil value) #528 

® Closed BattleHats opened this issue on Dec 29. 2018 • 0 comments 




BattleHats commented on Dec 29, 2018 • edited by Kampfkarren ▼ 

Error at 1546140485 

ReplicatedStorage.Libraries.ParentToChildAsync18: attempt to index local 'parent' (a nil value) 

ReplicatedStorage.Libraries.ParentToChildAsync line 18 - upvalue ParentToChildAsync 
ServerScriptService.StatHelper, line 12 - method GiveSpeedBuff 
Workspace.Hats.Buddy Baseball Cap.Rage, line 106 

battle- hats/Ga me/ServerScri ptService/StatHel per.lua 
Line 12 in dseaead 

12 valueObject.Parent « ParentToChildAsync(player, "SpeedMultiplier") 

3 BattleHats added the label on Dec 29, 2018 


Assignees 0 

No one—assign yourself 

Labels 0 



Notifications 

4 X Unsubscribe 0 


0 Kampfkarren closed this in 272d6fle on Dec 30, 2018 


You're receiving notifications because 
you're watching this repository. 


rR> 




BUT NOW THAT WE’RE ON GITHUB...PULL REQUESTS 


■ Code review lets team members make sure one another aren’t releasing buggy code 


■ Great for teams! 


:DataStore2(dataStoreName, player) type checking #33 

Merged Kampfkarren merged 2 commits into KaapfkarrenrBaster from :patch-i f*!. 3 days ago 

£3 Conversation 3 O Commits 2 Ws Checks $ 9 Files changed | 



commented 3 days ago Contributor +@ ••• 

:DataStore20 API call arguments are type checked to assure the user is correctly using the feature, spits out a 
descriptive error if the user isn't (validates dataStoreName is a string and player is an Instance). 

I also modified a single line to change single quotes into double quotes for consistency, didn't think it was 
large enough to make it's own PR. 


I :DataStore2(dataStoreName, player) type checking 


referenced this pull request 3 days ago 

Type checking #27 


65585b0 


<£ Closed 



rR> 








USING DEPENDENCIES? 


■ Roact, Rodux, Cmdr, DataStore2, etc all on GitHub 

■ Use submodules and Dependabot to automatically update them, 
while still making sure it works with your game. 


Bump Submodules/roact from '27ea43c' to 'ebfe578' 

il Open dependabot wants to merge 1 commit into master from dependabot/subaodules/subaod<iles/roact-ebfe578 
(P Conversation | ■©■ commits | iU Checks # 0 Files changed | 


dependabot bot commented 8 days ago 

Bumps Submodules/roact from 27ea43c to ebfeS78 . 


▼ Commits 


• ebfeS78 restored event suspension (#203) 

• 529F8e6 Miscellaneous repo housekeeping 

• 229d6a8 Update changelog 

• 8289dl5 Bless refigetValueO. update version numbers in docs (#202) 

• cl3e342 Merge branch 'master' into new-reconciler 

• 383cdce Prime changelog for 1.0.0 

• a587a49 Merge CHANGELOG from master 

• 4548e6e Hide tree internals (#201) 

• 8c77735 v0.2.0 

• 68880db Remove unused require 







HOW DO I SYNC MY FILES? 






ROJO 


■ Most robust file syncer, syncs both scripts and models 

■ Great third-party Visual Studio Code extension by evaera 

■ Used by games such as Adopt Me 

■ Difficult to integrate, but I’ve made it easy! 





RBXLX-T O-ROJO 


■ If you have an existing place, you can use rbxlx-to-rojo 
to convert your place to a Rojo format and sync it 

■ httDs://aithub.com/roio-rbx/rbxlx-to-rojo 





RBXLX-T O-ROJO 

■ After you download the exe through 
the releases tab...save your place as 
an “rbxlx” file somewhere. 



FILE B fr 

HOME MODEL TEST VIEW 

PLUGINS 

w 

JJJJ Local Server - 
mm * - Player 

£D #0 

Play 

Start 

Emulator Mute 

Simulation 

Clients and Servers 

Emulation Audio 

A Line Runner X 







RBXLX-T O-ROJO 

■ Open up rbxlx-to-rojo.exe and choose the rbxlx 


2019-06-27T08:35:30Z INFC 
2019-06-27T08:35:30Z INFO 

rbxlx 

rbxlx 

_to_rojo] rbxlx-to-rojo 0.1.0 
_to_rojo] Select a place file. 







X 

5 C > HDD (E:) > User > Documents 

> RDC 


v 0 Search RDC 

p 





0s- w [n o 

A 

Name 


Date modified Type 

Size 


0 PLACE.rbxlx 


2019-06-27 01:33 ... Roblox Place 

1,419 KB 



rR> 








Select the folder you want 
the project to be put into 


[2019-06-27T08:35:30Z INFO 
'2019-06-27T08:35:30Z INFO 
;2019-06-27T08:35:50Z INFO 
2019-06-27T08:35:50Z INFO 
'2019-06-27T08:35:54Z INFO 


rbxlxtorojo] rbxlx-to-rojo 0.1.0 
rbxlx_to_rojo] Select a place file. 
rbxlx_to_rojo] Opening place file 

rbxlx_to_rojo] Decoding place file, this is the longest part... 
rbxlx_to_rojo] Select the path to put your Rojo project in. 


iis PC > HDD (E) > User > Documents > RDC 


O Search RDC 


Date modified Type 


No items match your search. 


Select Folder Cancel 










RBXLX-T O-ROJO 

■ You’re done with rbxlx-to-rojo! 


> HDD (E:) > User > Documents > RDC > PLACE 

A 

n Name Date modified 

src 2019-06-2701:36. 

E default.project.json 2019-06-27 01:36 . 



v 


Type 
File folder 

JSON Source File 1 KB 














VS CODE EXTENSION 

■ Find and install the 
Rojo VS Code extension 

(3 

P 

K 

rR> 






VS CODE EXTENSION 

■ Install the pre-release version 



File Edit Selection 

View Go Debug 

Terminal Help 


51 

New File 

Ctrl+N 




New Window 

Ctrl+Shift+N 




Open File... 

Ctrl+O 




Open Folder... 

Ctrl+KCtrl+O 



■j 

Open Workspace... 




> 

Open Recent 

> 




Add Folder to Workspace... 



1 

Save Workspace As. 





Save 

Ctrl+S 




Save As... 

Ctrl+Shift+S 




Save All 

Ctrl+K S 



4 

Auto Save 





Preferences 

> 

Settings 

Ctrl+, 


rfb 


(Rojo 0.5 isn’t out yet) 






VS CODE EXTENSION 

■ Open the folder that you chose (should have default.project.json) 


>0 

File Edit Selection 

View Go 

3 

New File 

Ctrl+N 

New Window 

Ctrl+Shift+N 

P 

Open File... 

Ctrl+O 

Open Folder... 

Ctrl+K Ctrl+O 


rfb 





ROBLOX PLUGIN (WE’RE ALMOST DONE!) 

■ Search for “Rojo” on the Roblox plugins and install the latest one by LPGhatguy 



Rojo 0.5.0-alpha.11 

By LPGhatguy O Item Owned 

Price Free 

Type Plugin 

Genres All 

Updated May 29,2019 

Description This is the plugin portion o 

Roblox Studio projects. 

This plugin is for all 0.5.x v 
is available here: 


8 C ^?2 


https://www.roblox.com/li bn 




ROBLOX PLUGIN (WE’RE ALMOST DONE!) 

■ Then just click “Connect”, and you’re done! 


Connect 


Rojo 0.5.0-alpha.11 




CONCLUSION 


■ File syncing is awesome 

■ It lets you use professional tools to make games faster 

■ GitHub is optional, but awesome too. Version control and working 
multiple features at the same time lets your entire team be more 
productive 





LINKS 


■ Rojo (Starting Point) 

° https://aithub.com/roio-rbx/roio 
° https://qithub.com/roio-rbx/rbxlx-to-roio 

■ VS Code 

- https://code.visualstudio.com/ 

■ GitHub 

- https://auides.github.com/ 

° https://quides.qithub.com/introduction/flow/ 

° https://proqramminqhistorian.org/en/lessons/qettinq-started-with-qithub-desktop 
° https://help.github.com/en/desktop 




Thank you for your time. 







